<template>
  <div>
    <el-input v-model="searchName" placeholder="请输入优惠券名称" style="width: 200px; margin-right: 10px;"></el-input>
    <el-button type="primary" @click="fetchCoupons">搜索</el-button>
    <el-table :data="couponList" style="width: 100%; margin-top: 20px;">
      <el-table-column prop="id" label="ID" width="80"/>
      <el-table-column prop="name" label="优惠券名称" width="180"/>
      <el-table-column prop="category_id" label="类型" width="100">
        <template #default="scope">
          <span>{{ scope.row.category_id === 1 ? '通用券' : '商品券' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="discount" label="折扣" width="100"/>
      <el-table-column prop="discount_condition" label="使用门槛" width="120"/>
      <el-table-column prop="start_time" label="开始时间" width="180"/>
      <el-table-column prop="end_time" label="截止时间" width="180"/>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button type="primary" size="small" @click="openEditDialog(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="deleteCoupon(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑优惠券对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑优惠券" width="500px">
      <el-form :model="editForm">
        <el-form-item label="优惠券名称" label-width="100px">
          <el-input v-model="editForm.name" placeholder="请输入优惠券名称"></el-input>
        </el-form-item>
        <el-form-item label="折扣" label-width="100px">
          <el-input-number v-model="editForm.discount" :min="0.1" :max="1" :step="0.01" controls-position="right" placeholder="0.1-1"></el-input-number>
        </el-form-item>
        <el-form-item label="使用门槛" label-width="100px">
          <el-input v-model.number="editForm.discount_condition" placeholder="满多少可用"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" label-width="100px">
          <el-date-picker v-model="editForm.start_time" type="datetime" placeholder="选择开始时间"></el-date-picker>
        </el-form-item>
        <el-form-item label="截止日期" label-width="100px">
          <el-date-picker v-model="editForm.end_time" type="datetime" placeholder="选择截止日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

const couponList = ref([])
const searchName = ''
const fetchCoupons = () => {
  axios.get('/coupon/list?name='+searchName).then(res => {
    couponList.value = res.data
  })
}
onMounted(fetchCoupons)

const editDialogVisible = ref(false)
const editForm = ref({})
const openEditDialog = (row) => {
  editForm.value = { ...row }
  editDialogVisible.value = true
}
const submitEdit = () => {
  // category_id 逻辑：有商品ID为2，无为1
  axios.post('/coupon/update', editForm.value).then(() => {
    ElMessage.success('修改成功')
    editDialogVisible.value = false
    fetchCoupons()
  }).catch(() => {
    ElMessage.error('修改失败')
  })
}
const deleteCoupon = (id) => {
  ElMessageBox.confirm('确定要删除该优惠券吗？', '提示', { type: 'warning' }).then(() => {
    axios.post('/coupon/delete?id='+id).then(() => {
      ElMessage.success('删除成功')
      fetchCoupons()
    })
  })
}
</script>

<style scoped>
</style>